<template>
    <div>
      <van-nav-bar
        title="设置"
        left-text=""
        right-text=""
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickLeft"
      />
      <div id="div" style="display: none">
        商品：
        时间：
        价格：
        收货地址：<input id="text_" type="text" placeholder="请输入位置" name="address" />
        <input type="button" value="提交订单" v-on:click="searchByStationName();" /><br />
        经&nbsp;&nbsp;&nbsp;：<input type="text" name="longitude" id="lngs" ><br />
        纬&nbsp;&nbsp;&nbsp;：<input type="text" name="latitude" id="lats" ><br />
        <div id="container"></div>
      </div>
      <van-address-edit
        :area-list="areaList"
        :address-info="addressInfo"
        show-postal
        show-delete
        show-set-default
        show-search-result
        :search-result="searchResult"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
        @change-detail="onChangeDetail"
      />
    </div>
</template>

<script>
  import axios from 'axios'
  import areaList from '../assets/area.js'
  import { Notify } from 'vant';
  import { Toast } from "vant";
    export default {
        name: "addAddress",
      data() {
        return {
          longitude:'',
          location: [
            lng => '',
            lat => ''
          ],
          val: '',
          addressid:null,
          areaList,
          tel:'',
          addressInfo:{
            name: '',			//姓名
            tel: '',	//电话
            areaCode:'',	//北京市
            areaCode:'',	//北京市
            areaCode:'',	//西城区
            addressDetail:''	//详细地址
          },
          searchResult: [],
        };
      },
      methods: {
        onClickLeft(){
          this.$router.go(-1);
        },
        onSave(content) {
          var r=content.province+content.city+content.county+content.addressDetail;
          document.getElementById("text_").value=r;
          this.searchByStationName();
          var x=document.getElementById("lngs").value;
          var y=document.getElementById("lats").value;
          if(x!=null&&x!='') {
            //console.log(x+y+"aaa");}
            axios.post("api/user/addORupdate", {
              id: this.addressid,
              address: r,
              tel: content.tel,
              uid: sessionStorage.getItem("id"),
              name: content.name,
              x1: x,
              y1: y
            })
              .then(res => {
                if (res.data.code == 200) {
                  Notify({type: 'success', message: res.data.message});
                  this.$router.push("/user_address")
                }
              })
          }
        },
        onDelete() {
          if (this.addressid != null) {
            axios.post("api/user/deleteAddess", {id: this.addressid}).then(res => {
              if (res.data.code == 200) {
                Notify({type: 'success', message: res.data.message});
                this.$router.push("/user_address")
              }
            })
          } else {
            this.$router.push("/user_address");
          }
        },
        onChangeDetail(val) {
          if (val) {
            this.searchResult = [
              {
                name: '立人科技园',
                address: '西安市雁塔区',
              },
            ];
          } else {
            this.searchResult = [];
          }
        },
        setmap: function () {
          var map = new BMap.Map('container', {
            enableMapClick: true
          }); // 创建Map实例
          map.centerAndZoom(new BMap.Point(108.93, 34.27), 11); // 初始化地图,设置中心点坐标和地图级别
          //添加地图类型控件
          map.addControl(new BMap.MapTypeControl({
            mapTypes: [
              BMAP_NORMAL_MAP,
              BMAP_HYBRID_MAP
            ]
          }));
          map.setCurrentCity("西安"); // 设置地图显示的城市 此项是必须设置的
          map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
          const _this = this
          map.addEventListener('click', function (e) {
            _this.location.lng = parseFloat(e.point.lng).toFixed(3)
            _this.location.lat = parseFloat(e.point.lat).toFixed(3)
            alert(_this.location.lng + "," + _this.location.lat);
          })
        },
        searchByStationName: function () {
          var map = new BMap.Map('container', {
            enableMapClick: true
          }); // 创建Map实例
          map.clearOverlays(); //清空原来的标注
          var localSearch = new BMap.LocalSearch(map);
          localSearch.enableAutoViewport(); //允许自动调节窗体大小
          var keyword = document.getElementById("text_").value;
          localSearch.setSearchCompleteCallback(function (searchResult) {
            var poi = searchResult.getPoi(0);


            map.centerAndZoom(poi.point, 13);
            var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat)); // 创建标注，为要查询的地方对应的经纬度
            map.addOverlay(marker);
            document.getElementById("lngs").value = poi.point.lng;

            document.getElementById("lats").value = poi.point.lat;
            marker.addEventListener("click", function () {
              this.openInfoWindow(infoWindow);
            });

          });
          localSearch.search(keyword);
        },
        index: function () {
          $.ajax({
            url: "",
            dataType: "json",
            type: "get",
            success: function (date) {
              date.forEach(function (v) {
                $('#sheng').append("<option value='" + v.Id + "'>" + v.Name + "</option>");
              });
            }
          })
        }
      },
      mounted(){
        this.setmap();
          var item=this.$route.query.item;
          this.addressInfo.tel=item.tel;
          this.addressInfo.name=item.name;
          this.addressInfo.addressDetail=item.address;
          this.addressid=item.id;
          console.log(this.addressid);
      }
    }
</script>

<style scoped>

</style>
